<template>
  <div class="block">
    <div class="viewMain">
      <h2>{{ query.title }}</h2>
      <!-- 筛选条件 -->
      <el-form ref="formSearch" :model="searchForm">
        <el-row :gutter="10">
          <el-col :span="7">
            <el-row class="form_table">
              <el-form-item prop="infNameName">
                <el-input v-model.trim="searchForm.infNameName" size="medium" :placeholder="$t('apiList.name')" clearable />
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="7">
            <el-row class="form_table">
              <el-form-item prop="infName">
                <el-input v-model.trim="searchForm.infName" size="medium" :placeholder="$t('apiList.sign')" clearable />
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="10">
            <el-button
              type="primary"
              size="medium"
              round
              icon="el-icon-search"
              @click="
                pagination.pageNumber = 1
                getData()
              "
            >{{ $t('btn.query') }}</el-button>
            <el-button plain size="medium" round icon="el-icon-refresh" @click="doReset('formSearch')">{{ $t('btn.reset') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table stripe :data="table" header-row-class-name="tableHeaderGrey" border>
        <el-table-column prop="infName" :label="$t('apiList.sign')" align="center">
          <template slot-scope="scope">
            <el-link type="primary" @click="toViewDetail(scope.row)">{{ scope.row.infName }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="infNameName" :label="$t('apiList.name')" align="center" />
        <el-table-column prop="infDescription" :label="$t('apiList.desc')" align="center" />
        <el-table-column prop="updateTime" :label="$t('apiList.updateTime')" align="center" />
      </el-table>
      <el-pagination v-show="pagination.total > 0" background :current-page.sync="pagination.pageNumber" :page-sizes="$pageSizeAll" :page-size="pagination.pageSize" layout="total, prev, pager, next, jumper, sizes" :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import { pageList } from '@/api/generator/interface'

export default {
  name: 'ApiList',
  data() {
    return {
      searchForm: {
        infName: '',
        infNameName: '',
      },
      // 分页
      pagination: {
        total: 4,
        pageNumber: 1,
        pageSize: 10,
      },
      table: [],
      query: this.$route.query,
      id: this.$route.params.id,
    }
  },
  mounted() {
    this.pagination.pageNumber = 1
    this.getData()
  },
  methods: {
    toViewDetail(row) {
      this.$router.push({ name: 'OpenApiDetail', params: { id: row.id }})
    },
    getData() {
      const withGroup = this.id
      const params = {
        status: 2,
        sort: 'update_time',
        order: 'DESC',
        withGroup: withGroup,
        ...this.searchForm,
        pageNumber: this.pagination.pageNumber,
        pageSize: this.pagination.pageSize,
      }
      pageList(params).then(({ data }) => {
        this.pagination.total = data.total
        this.pagination.pageNumber = data.current
        this.table = data.records
      })
    },
    // 重置
    doReset: function(name) {
      this.$refs[name].resetFields()
      this.pagination.pageNumber = 1
      // this.advancedSearchForm = data.advancedSearchForm || []
      // this.commonId = data.commonId || ''
      this.getData()
    },
    // 页码改变
    handleCurrentChange(pageNumber) {
      this.pagination.pageNumber = pageNumber
      this.getData()
    },
    // 每页size改变时
    handleSizeChange(val) {
      this.pagination.pageNumber = 1
      this.pagination.pageSize = val
      this.getData()
    },
  },
}
</script>

<style scoped lang="scss">
.viewMain {
  overflow: hidden;
  padding: 0 20px;
  h2 {
    margin: 0 0 20px;
    font-size: 20px;
    line-height: 60px;
    border-bottom: 1px solid #dcdfe6;
    padding-left: 10px;
  }
  .message {
    overflow: hidden;
  }
  .title {
    font-size: 16px;
  }
  p {
    color: #666;
    font-size: 14px;
    margin: 0;
  }
  .red {
    color: rgb(249, 38, 114);
  }
  .orange {
    color: #e29629;
  }
  .black {
    color: #000;
  }
  .item {
    margin-top: 20px;
  }
  .codeTemplate {
    background: #f7f7f7;
    font-size: 14px;
    color: #333;
    padding: 20px;
    margin-top: 20px;
  }
  .jsonTemplate {
    margin: 10px 0;
    overflow: hidden;
  }
  .code {
    margin: 0;
  }
}
</style>
